/* Colors */
$white: #fff;
$light: #e1e4e8;
$gray: #9eaebb;
$black: #242424;
$blackLighter: #343a40;
$blackViolet: #121429;
$violet: #4e529a;
$green: #1d9b4a;
$darkViolet: #171a49; //MajorDark
$mediumViolet: #2f3264;
$lightViolet: #8c8dfc;
$lightVioletSemiTransparent: #8c8dfc66;
$red: #f25f5c;
$link-color: $lightViolet;
$color-secondary: $violet;
$openSans: "Open Sans", "sans-serif";
$colorLightGray: #e9ecef;

$hoverGray: #f2f2f2;

/* Uplifting */
$bgDesign: #f4f5f7;
$darkMain: #272640;

/* Extracted values */
$tempLightGray: #bababa;
$tempLightYellow: #bababa;
$tempDarkBlue: #11142b;
$tempTransparent: transparent;
$grayBG: rgba(186, 186, 186, 0.47);

/* Bg */
$accentBg: transparentize(
  $color: $gray,
  $amount: 0.95,
);
$bgLight: #fbfbfb;
$bgSecondary: #ffffff10;

/* Input */
$input-prefix-border-width: 0;
$input-border-width: 1px;
$input-border-color-dark: #ffffff14;
$input-border-color-focus-dark: #fff3;
$input-background-dark: #ffffff05;
$input-background-light: #00000005;
$input-border-color-light: #0000000a;
$input-border-color-focus-light: #0003;

/* Modal */
$modal-border-radius: (
  md: 8px,
);
$modal-border-color-dark: #ffffff14;
$modal-background-dark: $darkViolet;
$modal-border-color-light: #180d0d05;
$modal-background-light: $white;

/* Fonts */
$firaSans: "Fira Sans", "sans-serif";
$firaCode: "Fira Code", "sans-serif";

$font-family-primary-base: $firaSans;

/* Transitions */
$transition1: 0.2s ease;
$transition2: 0.3s ease;

/* Border-radius */
$borderRadiusXs: 6.6px;
$borderRadiusSm: 0.25rem;
$borderRadiusMd: 4px;
$borderRadius: 8px;
$borderRadiusBig: 16px;

/* Blocks */
$headerHeight: 60px;
$footerHeight: 85px;
$minRouteHeight: calc(100vh - 85px - 85px);
$minRouteHeightMain: calc(100vh - 85px - 85px);
$minRouteHeightWithExtra: calc(100vh - 200px);

/* Responsive */
$mobile: 768px;
$tablet: 991px;
$notebook: 1000px;
$desktop: 1201px;
$maxWidth: 1370px;
$biggestWidth: 1920px;

/* Font sizes */
$fontSizeXs: 10px;
$fontSizeRegular: 14px;

$mobileNormal: 13px;
$mobileHeader: 16px;

/* Shadow colors */
$shadowColor3: #00000007; //rgba(0, 0, 0, .03);
$shadowColor4: #0000000a; //rgba(0, 0, 0, .04);
$shadowColor5: #0000000c; //rgba(0, 0, 0, .05);
$shadowColor8: #00000015; //rgba(0, 0, 0, .08);
$shadowColor10: #0000001a; //rgba(0, 0, 0, .10);

.-dark {
  /* Shadow colors */
  $shadowColor3: #ffffff07;
  $shadowColor4: #ffffff0a; //rgba(255, 255, 255 .04);
  $shadowColor5: #ffffff0c; //rgba(255, 255, 255 .05);
  $shadowColor8: #ffffff15; //rgba(255, 255, 255 .08);
  $shadowColor10: #ffffff1a; //rgba(255, 255, 255 .10);
}

/* Shadows */
$shadowInset: inset 1px 1px 1px $shadowColor3;
$popoverShadow: 0 10px 40px $shadowColor5;
$shadowTop: 0 -3px 10px $shadowColor5;
$shadowBottom: 0 3px 10px $shadowColor5;
$inputContainerShadow: 0 2px 4px $shadowColor4, 0 4px 6px $shadowColor4;
$hoverShadow: 0 4px 8px $shadowColor8;
$defaultShadow: 0 4px 4px $shadowColor8;
$layerShadow: 0 1px 5px 0 $shadowColor10;
$tileShadow: 0 1px 0.5px $shadowColor10;
$modeShadow: 0 3px 5px -1px $shadowColor8, 0 6px 10px 0 $shadowColor10, 0 1px 18px 0 $shadowColor10;

body.inkline.-light {
  $bgSecondary: rgba(219, 224, 238, 0.79);
}
